<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'/>
    <link href='../fullcalendar.css' rel='stylesheet'/>
    <link href='../fullcalendar.print.css' rel='stylesheet' media='print'/>
    <script src='../lib/moment.min.js'></script>
    <script src='../lib/jquery.min.js'></script>
    <script src='../fullcalendar.min.js'></script>
    <script src='../gcal.js'></script>
    <script>
        $(document).ready(function () {
            $('#calendar').fullCalendar(
                {
                    // THIS KEY WON'SecurityConstants WORK IN PRODUCTION!!!
                    // To make your own Google API key, follow the directions here:
                    // http://fullcalendar.io/docs/google_calendar/
                    googleCalendarApiKey: 'AIzaSyDcnW6WejpTOCffshGDDb4neIrXVUA1EAE',
                    // US Holidays
                    events: 'usa__en@holiday.calendar.google.com',
                    eventClick: function (event) {
                        // opens events in a popup window
                        window.open(event.url, 'gcalevent', 'width=700,height=600');
                        return false;
                    },
                    loading: function (bool) {
                        $('#loading').toggle(bool);
                    }
                });
        });
    </script>
    <style>
        body {
            margin: 40px 10px;
            padding: 0;
            font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
            font-size: 14px;
        }

        #loading {
            display: none;
            position: absolute;
            top: 10px;
            right: 10px;
        }

        #calendar {
            max-width: 900px;
            margin: 0 auto;
        }
    </style>
</head>

<body>
<div id='loading'>loading...</div>
<div id='calendar'></div>
</body>

</html>